<template>
  <el-dialog
    title="选择更换教练"
    class="gl_dialog_TitleLine"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <div v-loading="dialogLoading">
      <div>
        <el-row>
          <el-col :span="14">
            <div class="transfer_wrap gl_mb_15">
              <div class="transfer_title gl_clear">
                <span class="gl_fl">必选成员</span>
              </div>
              <div class="transfer_content">
                <el-input v-model="Api_GET_ClubCoachQO.Filter" prefix-icon="el-icon-search" clearable style="margin-bottom:16px" @change="getcoachList()" />
                <el-table ref="multipleTable" v-loading="tableLoading" :data="tableData" @selection-change="selection">
                  <el-table-column type="selection" label-class-name="selection" :selectable="selectable1" />
                  <el-table-column label="姓名" prop="name" />
                  <el-table-column label="手机号" prop="phoneNumber" />
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :offset="2" :span="8">
            <div v-for="(item, index) in rightList" :key="index" class="transfer_wrap gl_mb_15">
              <div class="transfer_btn_wrap" @click="changeMemberToRight(item)">
                <i class="transfer_btn el-icon-d-arrow-right" title="将选择的成员移至此处" />
              </div>
              <div class="transfer_title gl_clear">
                <span class="gl_fl">
                  {{ item.name }}
                </span>
              </div>
              <div class="transfer_content">
                <div v-for="(jtem, jndex) in item.children" :key="jndex" class="gl_clear">
                  <span class="gl_fl">{{ jtem.name }}</span>
                  <i class="el-icon-close gl_pointer gl_fr" @click="removeMember(jtem, item, jndex)" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row class="gl_mt_15">
        <el-col :span="24" align="right">
          <el-button type="default" size="mini" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" size="mini" :loading="addfalse" @click="submit()">确定</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { api_GET_ClubCoach, api_PUT_ClubCoachCourseEmloyee } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCoachQO, UpdateCourseEmployeeInput } from '@/lib/form/hall/swaggerForm';
export default {
  props: {
    courseId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data () {
    return {
      tableLoading: false,
      addfalse: false,
      courseScheduleId: '',
      UpdateCourseEmployeeInput: new UpdateCourseEmployeeInput(),
      Api_GET_ClubCoachQO: new Api_GET_ClubCoachQO(),
      tableData: [],
      totalPage: 0,
      dialogVisible: false,
      dialogLoading: false,
      currentMember: [],
      mainMember: {},
      leftList: [],
      rightList: [{
        name: '主教练',
        children: []
      }, {
        name: '助教',
        children: []
      }]
    };
  },
  watch: {
    dialogVisible (val) {
      if (!val) {
        // 窗口关闭
        this.currentMember = [];
        this.mainMember = {};
        this.leftList = [];
        this.rightList = [{
          name: '主教练',
          children: []
        }, {
          name: '助教',
          children: []
        }];
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  created() {
    this.getcoachList();
  },
  methods: {
    getcoachList(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCoachQO.IsEnabled = '';
      this.Api_GET_ClubCoachQO.CanTeach = true;
      this.Api_GET_ClubCoachQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubCoachQO.Page = page || 1;
      this.Api_GET_ClubCoachQO.MaxResultCount = 999;
      this.Api_GET_ClubCoachQO.SkipCount = (this.Api_GET_ClubCoachQO.Page - 1) * this.Api_GET_ClubCoachQO.MaxResultCount;
      api_GET_ClubCoach(this.Api_GET_ClubCoachQO).then(res => {
        this.tableLoading = false;
        this.tableData = JSON.parse(JSON.stringify(res.items));
        for (var i = 0; i < res.items.length; i++) {
          this.tableData[i].selectable = true;
        }
        this.totalPage = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCoachQO.MaxResultCount = MaxResultCount;
      this.getcoachList();
    },
    pageIndexChange(currentPage) {
      this.getcoachList(currentPage);
    },
    // 打开
    open () {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.initData();
      });
    },
    close () {
      this.dialogLoading = false;
      this.dialogVisible = false;
    },
    hideLoading () {
      this.dialogLoading = false;
    },
    // 初始化数据，拷贝数据
    initData() {
      // this.mainMember = JSON.parse(JSON.stringify(this.requireMember));
      // const _optionMember = JSON.parse(JSON.stringify(this.optionMember)) || [];
      // this.leftList = _optionMember.filter(item => item.id !== this.mainMember.id);
      // this.rightList = JSON.parse(JSON.stringify(this.selectMember));
      // this.matchMainMemberFromRightList();
    },
    // 确认按钮
    submit() {
      this.addfalse = true;
      console.log(this.rightList);
      this.UpdateCourseEmployeeInput.courseScheduleId = this.courseId;
      const shu = [];
      for (var i = 0; i < this.rightList.length; i++) {
        for (var j = 0; j < this.rightList[i].children.length; j++) {
          const shu1 = {};
          shu1.employeeId = this.rightList[i].children[j].id;
          if (this.rightList[i].name === '主教练') {
            shu1.courseEmployeeTypeCode = 'Coach';
          } else {
            shu1.courseEmployeeTypeCode = 'AssistantCoach';
          }
          shu.push(shu1);
        }
      }
      console.log(this.UpdateCourseEmployeeInput);
      this.UpdateCourseEmployeeInput.courseEmployees = shu;
      this.UpdateCourseEmployeeInput.courseScheduleId = this.courseScheduleId;
      api_PUT_ClubCoachCourseEmloyee(this.UpdateCourseEmployeeInput).then(res => {
        this.$message({
          message: '更换成功',
          type: 'success'
        });
        this.addfalse = false;
        this.dialogVisible = false;
        this.$parent.getcourseList();
      }, error => {
        this.addfalse = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 校验选择的成员是否符合要求
    checkChooseListPass (checkMemberNum) {
      let _hasMainMember = false;
      let _seleceMemberLen = 0;
      for (let i = 0; i < this.rightList.length; i++) {
        const item = this.rightList[i];
        if (item._children.length) {
          _seleceMemberLen++;
        }
        item._children.forEach(jtem => {
          const _jid = jtem.registerId || jtem.id;
          const _mid = this.mainMember.registerId || this.mainMember.id;
          if (_jid === _mid) {
            _hasMainMember = true;
          }
        });
      }

      if (checkMemberNum && _seleceMemberLen < this.minSelectMemberNum) {
        this.$message({
          message: `最少应分配${this.minSelectMemberNum}名成员`,
          type: 'warning',
          showClose: true
        });
        return false;
      }

      if (!_hasMainMember) {
        this.$message({
          message: `必选成员未被选择，所选成员中必须包含必选成员`,
          type: 'warning',
          showClose: true
        });
        return false;
      }

      return true;
    },
    // 移除右侧成员
    removeMember (jtem, container, jndex) {
      container.children.splice(jndex, 1);
      this.$refs.multipleTable.clearSelection();
      this.selectable1();
      this.getcoachList();
    },
    // 将所选成员移至右侧
    changeMemberToRight (container) {
      if (this.currentMember.length === 0) {
        this.$message({
          message: `请先选择要添加的成员`,
          type: 'warning',
          showClose: true
        });
        return;
      }
      if (container.name === '主教练') {
        if (this.currentMember.length >= 2) {
          this.$message({
            message: `只能选择一位主教练`,
            type: 'warning',
            showClose: true
          });
          return;
        }
      }
      if (container.name === '主教练') {
        if (container.children.length === 1) {
          this.$message({
            message: `只能选择一位主教练`,
            type: 'warning',
            showClose: true
          });
          return;
        }
      }
      container.children.push(...this.currentMember);
      this.selectable1();
      this.currentMember = [];
    },
    deleteGroup () {
      this.$confirm(`您确定要删除整组吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(
          () => {
            this.dialogLoading = true;
            this.$emit('onDeleteGroupMember');
          }
        );
    },
    // 选中的数据
    selection(val) {
      console.log(val);
      this.currentMember = [];
      if (val.length > 0) {
        val.forEach(item => {
          if (item.selectable === true) {
            this.currentMember.push(item);
          }
        });
      }
    },
    // 对比右侧将左侧禁用
    selectable1(row) {
      console.log(row);
      for (let i = 0; i < this.rightList.length; i++) {
        for (let j = 0; j < this.rightList[i].children.length; j++) {
          if (this.rightList[i].children[j].name && row) {
            if (row.name === this.rightList[i].children[j].name) {
              row.selectable = false;
              return;
            } else {
              row.selectable = true;
            }
          }
        }
      }
      if (row) {
        if (row.selectable === false) {
          row.selectable = true;
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.transfer_wrap {
  position: relative;
  width: 100%;
  border-radius: 4px;
  // overflow: hidden;
  border: 1px solid #ebebeb;
}
.transfer_title {
  width: 100%;
  height: 28px;
  padding: 0 10px;
  line-height: 28px;
  font-size: 13px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebebeb;
}
.transfer_content {
  padding: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.transfer_btn {
  font-size: 24px;
  cursor: pointer;
  color: #1890ff;
  &:hover {
    color: #46a6ff;
  }
}
.transfer_btn_wrap {
  position: absolute;
  left: -35px;
  top: 16px;
  // margin-top: -16px;
}
.transfer_nodata {
  color: #c5c8ce;
  text-align: center;
}
::v-deep .el-input__inner{
    border-radius: 20px;
}
</style>
